<template>
	<view>
		<!-- 顶部 -->
		<view class="top">
			<view class="left">
				<text style="color: white; font-size: 36rpx;">1500 \n</text>
				<text class="income">当前现金余额 &nbsp;(元)</text>
				<button class="btn" @click="Jump">提现</button>
			</view>
			<view class="right">
				<view>
					<text>累计收入&nbsp;(元)&nbsp;&nbsp:\n</text>
					<text>累计提现&nbsp;(元)&nbsp;&nbsp:</text>
				</view>
				<view style="margin-left: 20rpx;">
					<text>1700元\n</text>
					<text>700元</text>
				</view>
			</view>
	
		</view>
<!-- 明细列表 -->
		<view style="position: absolute; top: 15vh;left: 2.5%;">
			<view class="incomelist">
				<view style="display: flex;justify-content:space-between;">
					<view><text style="font-weight: bold;">收支明细</text></view>
				<view><uni-datetime-picker v-model="single" type="daterange">
					<image src="../../../static/icons8-日历-50.png" style="width: 35rpx;height: 35rpx;"></image>
					<text style="position: relative;bottom:10rpx;font-size: 27rpx;color:#3082fa ;">日期</text>
				</uni-datetime-picker> </view>

				</view>
				
				<view>
				<view class="br"></view>
				<view class="incomelistDl">
					<view><text class="list-one">XX车辆清洗、抛光打蜡服务\n</text>
					<text class="list-two">核销时间:2022-10-12 11:09</text></view>
					<view class=".list-there">
						+&nbsp;50.00
					</view>
				</view>
				</view>
				
				<view>
				<view class="br"></view>
				<view class="incomelistDl">
					<view><text class="list-one">提现\n</text>
					<text class="list-two">核销时间:2022-10-12 11:09</text></view>
					<view class=".list-there">
						+&nbsp;200.00
					</view>
				</view>
				</view>
				
				<view>
				<view class="br"></view>
				<view class="incomelistDl">
					<view><text class="list-one">XX车辆清洗、抛光打蜡服务\n</text>
					<text class="list-two">核销时间:2022-10-12 11:09</text></view>
					<view class=".list-there">
						+&nbsp;50.00
					</view>
				</view>
				</view>
				
				<view>
				<view class="br"></view>
				<view class="incomelistDl">
					<view><text class="list-one">XX车辆清洗、抛光打蜡服务\n</text>
					<text class="list-two">核销时间:2022-10-12 11:09</text></view>
					<view class=".list-there">
						+&nbsp;50.00
					</view>
				</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			Jump(){
				uni.navigateTo({
					url:"/pages/income/Withdrawals/Withdrawals"
				})
			}
		}
	}
</script>

<style>
.top{
	width: 100vw;
	height: 25vh;
	background-color: #3082fa;
	position: absolute;
	display: flex;
	z-index: -1;
}
	.br{
		width: 100%;
		height: 5rpx;
		background-color:#efeff5 ;
		margin: 10rpx auto;
	}

.left{
	
	width: 50vw;
	height: 14vh ;
	text-align: center;
	border: 5rpx solid transparent;
	border-right-color: #5695f5 ;
	
	
}
.right{
	padding-left: 7vw;
	width: 40vw;
	height: 14vh;
	line-height: 6vh;
	text-align: center;
	color: white;
	font-size: 25rpx;
	display: flex;
}

.income{
	color: white;
	font-size: 23rpx;
}
.btn{
	margin-top: 30rpx;
	width: 180rpx;
	font-size: 20rpx;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
	color: white;
	background-color: #fe6431;
}
.incomelist{
	background-color: white;
	width: 85vw;
	margin-top: 20rpx;
	border-radius: 13rpx 13rpx 13rpx 13rpx;
	box-shadow: 3rpx 3rpx 3rpx 2rpx rgba(0, 0, 0, 0.2);
	padding: 5vw 5vw 5vw 5vw;

}
.incomelistDl{
	display: flex;
	justify-content: space-between;
}
.list-one{
	font-size: 25rpx;
	color: #565656;
	font-weight: bold;
}
.list-two{
	font-size: 20rpx;
	color: #b3b3b3;
}
.list-there{
	color: red;
	font-size: 25rpx;
	line-height: 7vh;
}
</style>
